<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        background-color: #0094ff;
    }
    div{
        color: #fff;
        position: absolute;
        left: 0;
        top: 0;
        transition: 20s;
    }
</style>
<body>
    <script>
        /*0.我来给你搞点破坏！！！！
            1.动态创建div
            2.设置开始的状态
                1.随机的x坐标
                2.y坐标 0 因为从天而降
                3随机大小
            3.把div插入到body中
            4.div设置结束的状态
                1.随机x的坐标
                2.y坐标 等于浏览器的高度
                3.随机大小
        */

        
        function createDiv(){
            var div = document.createElement("div");
            div.textContent = "*";

            var start = {
                //x的坐标应该是屏幕宽度  Math.random() 0-1

                x : Math.random()*window.screen.width,
                y : 0,
                scale : Math.random()*5
            }
            
            div.style.transform = `translate(${start.x}px,${start.y}px) scale(${start.scale})`
            
            document.body.appendChild(div);


            var end = {
                x : Math.random()*window.screen.width,
                y : window.screen.height,
                scale :Math.random()*5
            }
            div.offsetLeft

            div.style.transform = `translate(${end.x}px,${end.y}px) scale(${end.scale})`

            //过渡事件结束.
            div.addEventListener("transitionend",function(){
                document.body.removeChild(div)
            })
        }

        setInterval(function(){
            createDiv();
        },500)
    </script>
</body>
</html>
